<template>
	<view class="u-p-40 h_100 ">
		<!-- #ifdef APP-PLUS -->
		<view class="u-h-88">

		</view>
		<!-- #endif -->
		<view class="u-p-t-200">

		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="">
			<u-tabs :list="tabList" bg-color='' :is-scroll="false" active-color="#FC3533" :current="tabCurrent" @change="tabChange"></u-tabs>
		</view>
		<!-- 手机号登录 -->
		<view class="u-m-t-50 bs_EFEFEF bg_FFFFFF u-p-20 u-b-r-40" v-if='nums==2'>
			<view class="">
				<view class="u-flex ">
					<view class="">
						<u-image src='https://www.sqkjkj.vip/wxImg/login/1.png' width='28rpx' height='28rpx'></u-image>
					</view>
					<view class="u-font-28 u-p-l-18 u-weight">手机号</view>
				</view>
				<view class=" u-b-r-20 u-m-t-26 u-p-l-20" style="background-color: #F8F6F6;">
					<u-input type='number' placeholder="请输入手机号" maxlength='11' v-model='phone'></u-input>
				</view>
			</view>
			<view class="u-p-t-54">
				<view class="u-flex ">
					<view class="">
						<u-image src='https://www.sqkjkj.vip/wxImg/login/3.png' width='28rpx' height='28rpx'></u-image>
					</view>
					<view class="u-font-28 u-p-l-18 u-weight">验证码</view>
				</view>
				<view class=" u-b-r-20 u-flex u-row-between u-m-t-26 u-p-l-20" style="background-color: #F8F6F6;">
					<u-input type='number' placeholder="请输入验证码" maxlength='6' v-model='code'></u-input>

					<view class="u-p-r-24 u-font-24 u-p-l-30 u-w-200"
						style="color: #FC3533; border-left: 1rpx solid #FC3533;" @click="get_code" v-if="get_num==60">
						获取验证码</view>
					<view class="u-p-r-24 u-font-24 u-p-l-30 u-w-200 u-text-center"
						style="color: #FC3533; border-left: 1rpx solid #FC3533;" v-else>{{get_num}}S</view>
				</view>
			</view>
			</u-form>

			<view class="u-m-t-40 u-font-28">
				<u-button :customStyle="customStyle" :ripple="ripple" :hair-line="hairLine" class="u-b-r-20"
					@click="submit">登录
				</u-button>
			</view>

			<view @click="$u.route('/pages/login/register')"
				class="u-font-28 u-m-t-20 u-text-center u-p-b-20 u-font-26 u-text-center cl_3C4656">
				<u>立即去注册</u>
			</view>

		</view>
		<!-- 密码登陆 -->
		<view class="u-m-t-50 bs_EFEFEF bg_FFFFFF u-p-20 u-b-r-40" v-if='nums==1'>
			<view class="">
				<view class="u-flex ">
					<view class="">
						<u-image src='https://www.sqkjkj.vip/wxImg/login/1.png' width='28rpx' height='28rpx'></u-image>
					</view>
					<view class="u-font-28 u-p-l-18 u-weight">手机号</view>
				</view>
				<view class=" u-b-r-20 u-m-t-26 u-p-l-20" style="background-color: #F8F6F6;">
					<u-input type='number' placeholder="请输入手机号" maxlength='11' v-model='phone'></u-input>
				</view>
			</view>


			<view class="u-p-t-54">
				<view class="u-flex ">
					<view class="">
						<u-image src='https://www.sqkjkj.vip/wxImg/login/2.png' width='28rpx' height='28rpx'></u-image>
					</view>
					<view class="u-font-28 u-p-l-18 u-weight">登陆密码</view>
				</view>
				<view class=" u-b-r-20 u-m-t-26 u-p-l-20" style="background-color: #F8F6F6;">
					<u-input type='password' placeholder="请输入6位数字密码" maxlength='6' v-model='password'></u-input>
				</view>
			</view>

			<view class="u-m-t-40 u-font-28">
				<u-button :customStyle="customStyle" :ripple="ripple" :hair-line="hairLine" class="u-b-r-20"
					@click="submit">登录
				</u-button>
			</view>
			<view class="u-flex u-row-between u-font-28 cl_3C4656">
				<view @click="$u.route('/pages/login/register')" class="u-m-t-20 u-p-b-20 u-font-26 u-text-center ">
					<u>立即注册</u>
				</view>
				<view class="" style="color: #8B756D;" @click="$u.route('/pages/login/password')">
					忘记密码
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="!mandate" class="u-p-l-40 u-p-r-40 u-p-t-100">
			<view class="u-weight u-font-32">
				申请获取以下权限
			</view>
			<view class="u-font-28 u-m-t-20">
				获得你的公开信息（昵称、头像等）
			</view>
			<view class="u-flex-col u-col-center u-row-center u-m-t-80">
				<view class="u-flex-col u-col-center">
					<!-- <view class="">
						<u-icon name="weixin-circle-fill" color="#5AC56C" size="150"></u-icon>
					</view> -->
					<view @click="getUserInfo"
						class="u-m-t-20 bg_zs cl_FFF u-w-250 u-h-70 u-l-h-70 u-text-center margin-top-40 u-b-r-10">
						用户授权
					</view>
				</view>
			</view>
		</view>
		<!-- 授权手机 -->
		<view v-if="mandate" class="u-p-l-40 u-p-r-40 u-p-t-100">
			<view class="fw-bold fs-32">
				申请获取以下权限
			</view>
			<view class="fs-28 u-m-t-20">
				获得你的手机号授权
			</view>
			<view class="u-flex-col u-col-center u-row-center u-m-t-80">
				<view class="u-flex-col u-col-center">
					<view class="">
						<u-icon name="phone-fill" color="#5AC56C" size="150"></u-icon>
					</view>
					<view class="u-text-center margin-top-60 u-b-r-10">
						<button size="mini" class="" open-type="getPhoneNumber"
							@getphonenumber="getphonenumber">手机授权</button>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="u-h-50">
		</view>
		<view class="u-flex u-fix u-b-60 u-p-l-100">
			<u-image v-if="checkboxs==1" @click='checkboxs=2' class="" mode="widthFix" width="35rpx" height="35rpx"
				src="https://www.sqkjkj.vip/wxImg/common/login/1.png"></u-image>
			<u-image v-if="checkboxs==2" @click='checkboxs=1' class="" mode="widthFix" width="35rpx" height="35rpx"
				src="https://www.sqkjkj.vip/wxImg/common/login/2.png"></u-image>
			<view class="u-font-26 u-m-l-10">
				我已阅读同意<text @click.stop="$u.route('/pages/login/agreement?title=用户协议')"
					class='cl_48A2FF'>《用户协议》</text>和<text class='cl_48A2FF'
					@click.stop="$u.route('/pages/login/agreement?title=隐私政策')">《隐私政策》</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '账号密码登录',
					nums:1
				}, {
					name: '手机号登录',
					nums:2
				}],
				tabCurrent: 0,
				phone: '',
				code: '',
				get_num: 60,
				password: '',
				checkboxs: 1,
				// 切换登陆方式
				nums: 1,
				// LOGO图片
				web_site_logo: '',
				// 表单参数
				model: {
					mobile: '',
					loginpass: '',
					source: 'user'
				},
				models: {
					mobile: '',
					code: ''
				},
				// 正则验证参数
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur',
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					loginpass: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					}],
				},
				//验证码参数
				codeTips: '获取验证码',
				// button参数
				hairLine: true,
				ripple: true,
				customStyle: this.$styleCls.btnStyle,
				// 选择框
				checkbox: true,
				regcode: '',
				mandate: false,
				token: '',
				openid_wx: '',
				wxUserInfo: ''
			}
		},
		onLoad(obj) {
			console.log(obj.num);
			if (obj.num != undefined) {
				this.regcode = obj.num
			}
		},
		onShow() {
			if (uni.getStorageSync('regcode')) {
				this.model.regcode = uni.getStorageSync('regcode')
			}
		},
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// },
		methods: {
			tabChange(index){
				this.tabCurrent=index
				this.nums=this.tabList[index].nums
			},
			// 获取验证码
			get_code() {
				console.log(this.phone);
				if (this.phone.trim() == '' || !(
						/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/).test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确手机号码"
					})

				} else {
					this.$api.sed_code({
						mobile: this.phone,
						type: 'login',
					}, res => {
						console.log(res);
						if (res.data.code == 1) {
							this.get_num = 59
							let arr = setInterval(() => {
								if (this.get_num >= 1) {
									this.get_num--
								} else {
									this.get_num = 60
									clearInterval(arr)

								}
							}, 1000)
						}
					})

				}
			},
			// 切换登陆方式
			clicks(obj) {
				console.log(obj);
				this.nums = obj
			},
			submit() {
				if (this.checkboxs == 1) {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
				} else {
					// this.login()
					// 密码登录
					if (this.nums == 1) {
						if (this.phone.trim() == '' || this.password.trim() == '') {
							uni.showToast({
								icon: 'none',
								title: '账号或密码错误'
							})
						} else {
							this.$api.login({
								mobile: this.phone,
								loginpass: this.password,
								source: 'user'
							}, res => {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
								if (res.data.code == 1) {
									uni.setStorageSync('token', res.data.data.token.access_token)
									uni.setStorageSync('userinfo', res.data.data.user)
									uni.setStorageSync("source", res.data.data.source)
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/home/home'
										})
									}, 500)
								}
							})
						}

					} else {
						if (this.code.trim() == '') {
							uni.showToast({
								icon: 'none',
								title: '请输入验证码',
								source: 'user'
							})
						} else {
							this.$api.code_login({
								mobile: this.phone,
								code: this.code,
								source: 'user'
							}, res => {
								console.log(res);
								if (res.data.code == 1) {
									uni.showToast({
										icon: 'none',
										title: '登陆成功'
									})
									uni.setStorageSync('token', res.data.data.token.access_token)
									uni.setStorageSync('userinfo', res.data.data.user)
									uni.setStorageSync("source", res.data.data.source)
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/home/home'
										})
									}, 500)
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.msg
									})
								}
							})
						}

					}
				}

			},
			getUserInfo() {
				if (this.checkboxs == 1) {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
					return
				}
				var loginCode;
				let that = this
				uni.login({
					success: (res2) => {
						loginCode = res2.code;
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: (res3) => {
						var authInfo = res3;
						console.log(authInfo)
						var data = {
							code: loginCode,
							rawData: authInfo.rawData,
							signature: authInfo.signature,
							encryptedData: authInfo.encryptedData,
							iv: authInfo.iv,
							source: 'user',
							regcode: uni.getStorageSync('zcRegcode') || ''
						}
						that.$api.wxapp_login(data, res => {
							if (res.data.code == 1) {
								that.openid_wx = res.data.data.openid_wx
								that.wxUserInfo = res.data.data.wxUserInfo
								if (res.data.msg == '请绑定手机号') {
									that.mandate = true
									return
								}
								uni.removeStorageSync('zcRegcode')
								uni.setStorageSync('token', res.data.data.token.access_token)
								uni.setStorageSync('userinfo', res.data.data.user)
								uni.setStorageSync("source", res.data.data.user.source)
								uni.switchTab({
									url: '/pages/home/home'
								})
							}
						})
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			// 手机授权
			getphonenumber(r) {
				if (r.detail.errMsg == 'getPhoneNumber:ok') {
					let params = {
						openid_wx: this.openid_wx,
						wxUserInfo: this.wxUserInfo,
						code: r.detail.code,
						regcode: uni.getStorageSync('zcRegcode') || ''
					}
					this.$api.getWechatPhoneNumber(params, res => {
						if (res.data.code == 1) {
							uni.removeStorageSync('zcRegcode')
							uni.setStorageSync('token', res.data.data.token.access_token)
							uni.setStorageSync('userinfo', res.data.data.user)
							uni.switchTab({
								url: '/pages/home/home'
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: url("https://www.sqkjkj.vip/wxImg/common/login/login.png") no-repeat;
		background-size: 100% 100%;
	}
</style>
